import { CaseConfigType } from '@shared';
import { BaseComponent } from './base/base.component';
import { DisableComponent } from './disable/disable.component';
import { ClearComponent } from './clear/clear.component';
import { SaveOnBlurComponent } from './save-on-blur/save-on-blur.component';
import { BatchInputComponent } from './batch-input/batch-input.component';

export const InputTagConfig: CaseConfigType = {
  location: '标签输入框 InputTag',
  description: '通过标签实现批量的内容输入。',
  description_en: '通过标签实现批量的内容输入Importing Content in Batches Using Tags.',
  component: [
    {
      demo: BaseComponent,
      codePath: 'showcase/input-tag/base/base.component',
      demoTitle: '基本用法',
      demoTitle_en: 'Basic Usage',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: DisableComponent,
      codePath: 'showcase/input-tag/disable/disable.component',
      demoTitle: '禁用',
      demoTitle_en: 'Disable',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: ClearComponent,
      codePath: 'showcase/input-tag/clear/clear.component',
      demoTitle: '一键清除',
      demoTitle_en: 'One-Click Clear',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: SaveOnBlurComponent,
      codePath: 'showcase/input-tag/save-on-blur/save-on-blur.component',
      demoTitle: '失焦时保存',
      demoTitle_en: 'Save when out of focus',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: BatchInputComponent,
      codePath: 'showcase/input-tag/batch-input/batch-input.component',
      demoTitle: '批量输入',
      demoTitle_en: 'Batch input',
      demoDescription: '',
      demoDescription_en: '',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-input-tag',
  snippet: `<lv-input-tag [(ngModel)]="\${1:[]}"> </lv-input-tag>`,
  mApi: [
    {
      name: 'InputTag 属性',
      name_en: 'InputTag Options',
      api: [
        {
          attribute: 'lvAutoFocus',
          type: 'boolean',
          default: 'false',
          description: `自动聚焦。`,
          description_en: `Autofocus.`,
        },
        {
          attribute: 'lvClearIcon',
          type: 'string | boolean',
          default: 'false',
          description: `是否支持清除，当设置为true时允许清除，显示默认的图标，支持自定义清除图标。`,
          description_en: `Indicates whether to support clearing. When this parameter is set to true, the clearing is allowed. The default icon is displayed. You can customize the clearing icon.`,
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用。',
          description_en: 'Whether to disable。',
        },
        {
          attribute: 'lvDefaultInputValue',
          type: 'string',
          default: '--',
          description: '控件输入框内的默认值。',
          description_en: 'Default value in the input box of the control.',
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string',
          default: '--',
          description: '预设文案。',
          description_en: 'Preset copywriting.',
        },
        {
          attribute: 'lvSize',
          type: 'LvSizeLD',
          default: 'default',
          description: `尺寸大小。`,
          description_en: `Size.`,
        },
        {
          attribute: 'lvMaxLength',
          type: 'number',
          default: '',
          description: '允许输入的最大字符数，默认无限制。',
          description_en: 'The maximum number of characters allowed to be entered, no limit by default.',
          global: true,
        },
        {
          attribute: 'lvSaveOnBlur',
          type: 'boolean',
          default: 'false',
          description: `失焦时是否自动存储正在输入的文本。`,
          description_en: `Indicates whether to automatically store the text being entered when out of focus.`,
        },
        {
          attribute: 'lvSeparator',
          type: 'string[]',
          default: '--',
          description: `触发自动分词的分隔符。`,
          description_en: `Separator that triggers automatic word segmentation.`,
        },
        {
          attribute: 'lvOnPressEnter',
          type: `(e: KeyboardEvent) => void`,
          default: '--',
          description: `按enter键的回调，默认按enter为添加标签，传入onPressEnter后覆盖默认添加操作。`,
          description_en: `Callback of pressing Enter. By default, you can press Enter to add a tag. After onPressEnter is transferred, the default adding operation is overwritten.`,
        },
        {
          attribute: 'lvOnRemove',
          type: '(value: (string | InputTagItem)[], e: Event) => boolean | void',
          default: '--',
          description: `删除/清空标签时的回调，返回false的时候不会执行删除/清空`,
          description_en: `Callback for deleting or clearing a tag. If false is returned, the tag is not deleted or cleared.`,
        },
      ],
      event: [
        {
          event: 'lvOnBlur',
          parameter: `Event`,
          description: '失去焦点时候触发。',
          description_en: 'Triggered when you lose focus.',
        },
        {
          event: 'lvOnChange',
          parameter: `{ value: string[]; tagValue: (string | InputTagItem)[] }`,
          description: '控件值改变时触发。',
          description_en: 'Triggered when the control value changes.',
        },
        {
          event: 'lvOnClear',
          parameter: `Event`,
          description: '点击清除按钮的回调。',
          description_en: 'Callback for clicking the Clear button.',
        },
        {
          event: 'lvOnFocus',
          parameter: `Event`,
          description: '聚焦时触发。',
          description_en: 'Triggered when focusing.',
        },
        {
          event: 'lvOnInputChange',
          parameter: `string`,
          description: '输入框文本改变的回调。',
          description_en: 'Callback for changing the text in the text box.',
        },
        {
          event: 'lvOnKeyDown',
          parameter: `KeyboardEvent`,
          description: '键盘事件的回调。',
          description_en: 'Keyboard event callback.',
        },
      ],
    },
  ],
};
